<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/dayjs.min.js"></script>
</head>

<body>
    <!-- 
        过滤器：
            定义：就是对要显示的数据进行特殊的格式化后再显示(适用于一些简单的逻辑处理)
            语法：
                1.注册过滤器: Vue.filter(name,callback) 或者 new Vue(filters:{})
                2.使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性="xxx | 过滤器名"
            备注：
                1.过滤器也可以接收额外参数、多个过滤器也可以串联
                2.并没有改变原本的数据，是产生新的对应的数据
     -->

    <div id="root">
        <h2>当前时间戳时间:{{time}}</h2>
        <!-- 计算方法实现 -->
        <h2>格式化后的时间:{{fmtTime}}</h2>
        <!-- methods实现 -->
        <h2>格式化后的时间:{{getFmtTime()}}</h2>

        <!-- 过滤器实现 -->
        <h2>格式化后的时间:{{time | timeFormater}}</h2>
        <!-- 过滤器的参数 第一个参数默认的是管道符前面的数据 可以不用写 -->
        <h2>格式化后的时间:{{time | timeFormater("YYYY年MM月DD日")}}</h2>


    </div>


    <script>

        // 全局过滤器 在所有的vue实例 上都可以使用
        Vue.filter("mySlice", function (value) {
            return value.slice(0, 4);
        })
        new Vue({
            el: "#root",
            data() {
                return {
                    time: "",
                }
            },


            computed: {
                // 简写形式 因为不用修改 所以不需要setter
                fmtTime() {
                    return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss');
                }
            },
            methods: {
                getFmtTime() {
                    return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss');
                }
            },

            // 局部过滤器
            // 过滤器 对我们数据进行加工
            filters: {
                timeFormater(value, formater) {
                    // console.log(value);
                    // 如果有自定义的格式化时间就采用自定义的
                    if (formater) {
                        return dayjs(value).format(formater);
                    }
                    // 没有就默认
                    return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss');
                }
            },

            //#region 
            watch: {
                // 侦听属性实现时间的动态
                // 一秒更新一次时间
                time: {
                    immediate: true,
                    handler() {
                        setInterval(() => {
                            this.time = Date.now();
                        }, 1000);
                    },
                },
            },
            //#endregion
        })
    </script>

</body>

</html>